<template>
  <div class="dashboard-wrapper">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-banner" shadow="hover">
      <div class="banner-content">
        <div class="banner-icon">
          <el-icon :size="60" color="#409EFF"><Avatar /></el-icon>
        </div>
        <div class="banner-info">
          <h2>欢迎回来，{{ userInfo.realName }}！</h2>
          <p class="user-role">
            <el-tag :type="roleTypeMap[userInfo.roleType]?.type" size="large" effect="dark">
              {{ roleTypeMap[userInfo.roleType]?.name }}
            </el-tag>
          </p>
          <p class="user-id">工号: {{ userInfo.id }} | 职位: {{ userInfo.position }}</p>
          <p class="login-time">登录时间：{{ loginTime }}</p>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="dashboard-content">
      <!-- 系统信息卡片 -->
      <el-col :xs="24" :md="12">
        <el-card class="system-info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
              <el-icon><InfoFilled /></el-icon>
            </div>
          </template>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">姓名</span>
              <span class="info-value">{{ userInfo.realName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">手机号</span>
              <span class="info-value">{{ userInfo.phone }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">邮箱</span>
              <span class="info-value">{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">浏览器信息</span>
              <span class="info-value">{{ browserInfo }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">当前时间</span>
              <span class="info-value">{{ currentTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Avatar, InfoFilled } from '@element-plus/icons-vue'
import { getUserInfo, setUserInfo } from '@/utils/auth'
import { getUserInfoApi } from '@/api/user'

const userInfo = ref({
  id: null,
  roleType: null,
  realName: '',
  phone: '',
  position: '',
  deptId: null,
  email: ''
})

const loginTime = ref('')
const currentTime = ref('')
const browserInfo = ref('')

// 角色类型映射
const roleTypeMap = {
  1: { name: '普通员工', type: 'success' },
  2: { name: '部门经理', type: 'warning' },
  3: { name: '系统管理员', type: 'danger' }
}

// 获取浏览器信息
const getBrowserInfo = () => {
  const ua = navigator.userAgent
  let browser = ''
  if (ua.includes('Chrome')) {
    browser = 'Chrome'
  } else if (ua.includes('Firefox')) {
    browser = 'Firefox'
  } else if (ua.includes('Safari')) {
    browser = 'Safari'
  } else if (ua.includes('Edge')) {
    browser = 'Edge'
  } else if (ua.includes('Trident')) {
    browser = 'IE'
  } else {
    browser = 'Unknown'
  }
  const os = ua.includes('Windows') ? 'Windows' : ua.includes('Mac') ? 'MacOS' : 'Unknown'
  return `${browser} / ${os}`
}

// 更新当前时间
const updateCurrentTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 加载用户完整信息
const loadUserInfo = async () => {
  try {
    const res = await getUserInfoApi()
    if (res.data) {
      userInfo.value = {
        id: res.data.id,
        roleType: res.data.roleType,
        realName: res.data.realName || '未设置',
        phone: res.data.phone,
        position: res.data.position || '未设置',
        deptId: res.data.deptId,
        email: res.data.email || '未设置'
      }
      // 保存到本地存储
      setUserInfo(userInfo.value)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

onMounted(async () => {
  // 获取用户信息
  const info = getUserInfo()
  if (info) {
    userInfo.value = info
  }
  
  // 设置登录时间
  const loginTimeStr = localStorage.getItem('loginTime')
  if (loginTimeStr) {
    loginTime.value = new Date(loginTimeStr).toLocaleString('zh-CN')
  } else {
    // 如果没有登录时间记录，使用当前时间
    const now = new Date()
    loginTime.value = now.toLocaleString('zh-CN')
    localStorage.setItem('loginTime', now.toISOString())
  }
  
  // 设置浏览器信息
  browserInfo.value = getBrowserInfo()
  
  // 更新当前时间
  updateCurrentTime()
  const timer = setInterval(updateCurrentTime, 1000)
  
  // 异步加载完整用户信息
  await loadUserInfo()
  
  // 清理函数
  onUnmounted(() => {
    clearInterval(timer)
  })
})
</script>

<style scoped>
.dashboard-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 欢迎卡片样式 */
.welcome-banner {
  width: 100%;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

.banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-info h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #303133;
  font-weight: 600;
}

.user-role {
  margin: 0 0 8px 0;
}

.user-id,
.login-time {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

/* 仪表盘内容布局 */
.dashboard-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* 系统信息卡片 */
.system-info-card {
  height: fit-content;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #606266;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  text-align: right;
  flex: 1;
  margin-left: 16px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .banner-info h2 {
    font-size: 20px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-value {
    text-align: left;
    margin-left: 0;
  }
}

@media screen and (max-width: 480px) {
  .dashboard-wrapper {
    gap: 16px;
  }
}
</style>
